<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Syntax highlighting</title>
    <link href="assets/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <link href="assets/css/app.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <style>.colortiles{margin:1em 0 2em}.mtl{margin-top:3em}
      .red-background{background-color:#d73737}
      .orange-background{background-color:#b65611}
      .yellow-background{background-color:#cfb017}
      .green-background{background-color:#60ac39}
      .cyan-background{background-color:#1fad83}
      .blue-background{background-color:#6684e1}
      .violet-background{background-color:#b854d4}
      .magenta-background{background-color:#d43552}
    </style>

    <!--[if IE]>
    <link href="assets/css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <![endif]-->
    <meta name="viewport" content="width=device-width">
    <meta name="author" content="Bram de Haan">
    <meta name="robots" content="index, follow">  <meta name="description" content="Colection of colorschemes for Code Syntax highlighting"/>
    <link rel="author" href="https://plus.google.com/+BramdeHaan/posts">
    </head>
    <body>

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="NewTheme" viewBox="0 0 80 50">
<g transform="rotate(8 32 32)">
<g>
<rect x="38" fill="#c55000" width="3" height="6"/>
<rect x="38" y="44" fill="#c55000" width="3" height="6"/>
<rect x="74" y="22" fill="#c55000" width="6" height="3"/>
<rect y="22" fill="#c55000" width="6" height="3"/>
<rect x="64.713" y="3.808" transform="matrix(-0.53 -0.848 0.848 -0.53 95.5307 66.5651)" fill="#c55000" width="3" height="6"/>
<rect x="11.286" y="37.192" transform="matrix(-0.5298 -0.8481 0.8481 -0.5298 -14.5262 72.3317)" fill="#c55000" width="3" height="6"/>
<rect x="11.286" y="3.808" transform="matrix(0.5298 -0.8481 0.8481 0.5298 0.2381 14.0448)" fill="#c55000" width="3" height="6"/>
<rect x="64.712" y="37.192" transform="matrix(0.5298 -0.8481 0.8481 0.5298 -2.956 75.0528)" fill="#c55000" width="3" height="6"/>
</g>
<g>
<path fill="#b30" d="M30,30l-3.5-8v8H24V18h3l3.5,8v-8H33v12H30z"/>
<path fill="#b30" d="M37.5,19.999V23H41v2h-3.5v3h4.682v2H35V18h7v1.999H37.5z"/>
<path fill="#b30" d="M52,30l-1.75-9l-1.75,9h-3L43,18h2.606L47,27l2-9h2.5l2,9l1.5-9h2.5l-2,12H52z"/>
</g>
</g>
</symbol>
</svg>

    <!-- Header and Nav -->

    <header class="row header">
      <div class="large-4 columns">
        <h1 class="repo-title"><a href="http://atelierbram.github.io/syntax-highlighting/">Syntax Highlighting <span class="tagline sh-small">colorschemes</span></a></h1>
      </div>

      <nav class="large-8 columns">
        <ul class="inline-list right">
          <li><a href="chrome-devtools">Chrome Devtools</a></li>
          <li><a href="lab">Lab</a></li>
          <li><a href="prism">Prism</a></li>
          <li><a href="duotones">Duotones</a></li>
          <li><a href="atelier-schemes/" data-dropdown="drop-atelierschemes" class="button dropdown dropdown-atelier">Atelier Schemes<span data-dropdown="drop-atelierschemes"></span></a><br>
            <ul id="drop-atelierschemes" class="f-dropdown small" data-dropdown-content>
              <li><a href="atelier-schemes">index - overview</a></li>
              <li><a href="atelier-schemes/forest">Forest</a></li>
              <li><a href="atelier-schemes/plateau">Plateau</a></li>
              <li><a href="atelier-schemes/heath">Heath</a></li>
              <li><a href="atelier-schemes/cave">Cave</a></li>
              <li><a href="atelier-schemes/sulphurpool">Sulphurpool</a></li>
              <li><a href="atelier-schemes/lakeside">Lakeside</a></li>
              <li><a href="atelier-schemes/savanna">Savanna</a></li>
              <li><a href="atelier-schemes/seaside">Seaside</a></li>
              <li><a href="atelier-schemes/estuary">Estuary</a></li>
              <li><a href="atelier-schemes/dune">Dune</a></li>
              <li><a href="atelier-schemes/output">Output</a></li>
            </ul>
          </li>
        </ul>
      </nav>

    </header>

    <!-- End Header and Nav -->


    <div class="row">

      <!-- Main Content Section -->
      <!-- This has been source ordered to come first in the markup (and on small devices) but to be to the right of the nav on larger screens -->
      <article class="article article--demo">

        <div id="wrap" class="inner-wrap">

          <h3 class="mtl" id="duotones"><a href="duotones/">Duotones</a><svg class="new-theme-svg"><use xlink:href="#NewTheme" /></h3>
          <p>Based on <a href="http://simurai.com/projects/2016/01/01/duotone-themes/">DuoTone themes</a> by <a href="http://simurai.com/">Simurai</a> for Atom.</p>
          <p>Go to <a href="duotones/">demopage</a></p>

          <blockquote>“DuoTone themes use only 2 hues (7 shades in total). It <strong>tones down</strong> less important parts (like punctuation and brackets) and highlights only the <strong>important</strong> ones. This leads to a more calm color scheme, but still lets you find the stuff you’re looking for.”</blockquote>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300" class="colortiles"><g>
            <rect x="0" y="0" width="150" height="150"      fill="#2a2734" />
            <rect x="150" y="0" width="150" height="150"    fill="#363442" />
            <rect x="300" y="0" width="150" height="150"    fill="#545167" />
            <rect x="450" y="0" width="150" height="150"    fill="#6c6783" />
            <rect x="600" y="0" width="150" height="150"    fill="#7e75a9" />
            <rect x="750" y="0" width="150" height="150"    fill="#6a51e6" />
            <rect x="900" y="0" width="150" height="150"    fill="#7a63ee" />
            <rect x="1050" y="0" width="150" height="150"   fill="#8b76f4" />
            <rect x="0" y="150" width="150" height="150"    fill="#9b87fd" />
            <rect x="150" y="150" width="150" height="150"  fill="#c4b8fe" />
            <rect x="300" y="150" width="150" height="150"  fill="#eeebff" />
            <rect x="450" y="150" width="150" height="150"  fill="#e09142" />
            <rect x="600" y="150" width="150" height="150"  fill="#ffb366" />
            <rect x="750" y="150" width="150" height="150"  fill="#ffba76" />
            <rect x="900" y="150" width="150" height="150"  fill="#ffcc99" />
            <rect x="1050" y="150" width="150" height="150" fill="#7c756e" />
            </g></svg>

             <pre class="prism-snippet" style="background-color:#2a2734;" class="screenshot language-javascript"><code style="color:#b3a5fe" class="language-javascript" data-language="javascript"><span class="token lf">
</span><span style="color:#fc9" class="token keyword">function</span> <span class="token function">foo<span style="color:#726e87" class="token punctuation">(</span></span>bar<span style="color:#726e87" class="token punctuation">)</span> <span style="color:#726e87" class="token punctuation">{</span><span class="token lf">
</span>    <span style="color:#fc9" class="token keyword">var</span> a <span style="color:#e09142" class="token operator">=</span> <span style="color:#e09142" class="token number">42</span><span style="color:#726e87" class="token punctuation">,</span><span class="token lf">
</span>        b <span style="color:#e09142" class="token operator">=</span> <span style="color:#fc9" class="token string">'Prism'</span><span style="color:#726e87" class="token punctuation">;</span><span class="token lf">
</span>    <span style="color:#fc9" class="token keyword">return</span> a <span style="color:#e09142" class="token operator">+</span> <span class="token function">bar<span style="color:#726e87" class="token punctuation">(</span></span>b<span style="color:#726e87" class="token punctuation">)</span><span style="color:#726e87" class="token punctuation">;</span><span class="token lf">
</span><span style="color:#726e87" class="token punctuation">}</span></code></pre>

            <h3 class="mtl"><a href="atelier-schemes/">Atelier Schemes</a></h3>

            <ul>
              <li><a href="http://atelierbram.github.io/syntax-highlighting/atelier-schemes">index - demopages</a></li>
              <li><a href="https://github.com/atelierbram/syntax-highlighting/tree/master/atelier-schemes/output">Downloads</a></li>
            </ul>
            <figure class="mtm mbl">
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300">
                <style type="text/css">
<![CDATA[
                       .base00-dune-bg  {fill:#20201d}
                       .base01-dune-bg  {fill:#292824}
                       .base02-dune-bg  {fill:#6e6b5e}
                       .base03-dune-bg  {fill:#7d7a68}
                       .base04-dune-bg  {fill:#999580}
                       .base05-dune-bg  {fill:#a6a28c}
                       .base06-dune-bg  {fill:#e8e4cf}
                       .base07-dune-bg  {fill:#fefbec}
                       .base08-dune-bg, .red-dune-bg     {fill:#d73737}
                       .base09-dune-bg, .orange-dune-bg  {fill:#b65611}
                       .base0A-dune-bg, .yellow-dune-bg  {fill:#ae9513}
                       .base0B-dune-bg, .green-dune-bg   {fill:#60ac39}
                       .base0C-dune-bg, .cyan-dune-bg    {fill:#1fad83}
                       .base0D-dune-bg, .blue-dune-bg    {fill:#6684e1}
                       .base0E-dune-bg, .violet-dune-bg  {fill:#b854d4}
                       .base0F-dune-bg, .magenta-dune-bg {fill:#d43552}
                       text{font-size:1.875em}]]></style>
                <g>
                <rect x="0" y="0" width="150" height="150" class="base00-dune-bg" />
                <rect x="150" y="0" width="150" height="150" class="base01-dune-bg" />
                <rect x="300" y="0" width="150" height="150" class="base02-dune-bg" />
                <rect x="450" y="0" width="150" height="150" class="base03-dune-bg" />
                <rect x="600" y="0" width="150" height="150" class="base04-dune-bg" />
                <rect x="750" y="0" width="150" height="150" class="base05-dune-bg" />
                <rect x="900" y="0" width="150" height="150" class="base06-dune-bg" />
                <rect x="1050" y="0" width="150" height="150" class="base07-dune-bg" />
                <rect x="0" y="150" width="150" height="150" class="yellow-dune-bg" />
                <rect x="150" y="150" width="150" height="150" class="orange-dune-bg" />
                <rect x="300" y="150" width="150" height="150" class="red-dune-bg" />
                <rect x="450" y="150" width="150" height="150" class="magenta-dune-bg" />
                <rect x="600" y="150" width="150" height="150" class="violet-dune-bg" />
                <rect x="750" y="150" width="150" height="150" class="blue-dune-bg" />
                <rect x="900" y="150" width="150" height="150" class="cyan-dune-bg" />
                <rect x="1050" y="150" width="150" height="150" class="green-dune-bg" />
                </g>
              </svg>

              <figcaption class="fig-cap">
              <pre>Atelier Schemes, demotiles for Dune,
 syntax highlighting colorscheme</pre>
              </figcaption>
            </figure>

            <figure class="sh-fig sh-screenshot mtm mbl">
              <img src="http://atelierbram.github.io/syntax-highlighting/assets/img/sulphurpool-dark_vim_640x425.png" alt="screenshot of Sulphurpool colorscheme - dark version - in Vim" class="img-block" />
              <figcaption class="fig-cap">
              <pre>Screenshot Sulphurpool &#8211; dark version &#8211; in Vim</pre>
              </figcaption>
            </figure>


            <h3 class="mtl"><a href="prism/">Prism</a></h3>

            <p>Colorschemes for Prism: <a href="http://atelierbram.github.io/syntax-highlighting/prism"> demopage</a></p>

            <figure class="sh-fig sh-screenshot mtm mbl">
              <img src="https://lh6.googleusercontent.com/-27KX3QAEzAc/Ug9O3QH1t2I/AAAAAAAAAlw/tdEU6foUIXM/s800/prism-styleswitcher_screenshot_546x364.png" alt="screenshot of styleswitcher for Prism themes" class="img-block">
              <figcaption class="fig-cap">
              <pre>screenshot of styleswitcher for Prism themes</pre>
              </figcaption>
            </figure>

            <h3 class="mtl"><a href="chrome-devtools">Chrome DevTools</a></h3>

            <p>Solarized Light theme <a href="http://atelierbram.github.io/syntax-highlighting/chrome-devtools">demopage</a>     </p>

            <figure class="sh-fig sh-screenshot mtm mbl"><img src="https://lh3.googleusercontent.com/-RBaou2IeYOw/Ug6SDCxgI0I/AAAAAAAAAlQ/0yR4Ugm2gGM/s800/screenshot_chrome-devtools_solarized-light_640x480.png" alt="Screenshot of Chrome DevTools (undocked), themed with Solarized-Light" class="img-block" />
              <figcaption class="fig-cap">
              <pre>Screenshot of Chrome DevTools (undocked), themed with Solarized-Light</pre>
              </figcaption>
            </figure>


            <h3 class="mtl"><a href="lab/">Colorscheme Lab</a></h3>
            <p>Try <a href="lab">Colorscheme Lab</a></p>
            <figure class="sh-fig sh-screenshot mtm mbl">

              <img src="https://lh6.googleusercontent.com/-ZZiLu6PVYCc/UhT1RHORo3I/AAAAAAAAAnQ/bXsZ82HGwtI/s800/screenshot_colorscheme-lab_640x480.png" alt="Screenshot of Colorscheme Lab, a Code Syntax Highlighter Builder" class="img-block" />
              <figcaption class="fig-cap"><pre>Screenshot of Colorscheme Lab, a Code Syntax Highlighter Builder</pre></figcaption></figure>

              <ul>
                <li><a href="http://codepen.io/atelierbram/pen/JnbIt">Colorscheme Lab on CodePen</a>
                  <p data-height="295" data-theme-id="71" data-slug-hash="JnbIt" data-user="atelierbram" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/atelierbram/pen/JnbIt'>Colorscheme Lab – with Sass Variables</a> by Bram de Haan (<a href='http://codepen.io/atelierbram'>@atelierbram</a>) on <a href='http://codepen.io'>CodePen</a></p><script async src="http://codepen.io/assets/embed/ei.js"></script>
                </li>
                <li><a href="https://gist.github.com/atelierbram/6283373">Colorscheme Lab as Github Gist</a></li>
                <li><a href="http://devthemez.com">More Themes for Web Developer's Toys</a></li>
              </ul>

        </div>
      </article>

    </div>

    <!-- Footer -->
    <footer class="page-footer row">
      <div class="large-12 columns">
        <div class="row">
          <div class="large-8 columns">
            <p id="license" class="copyright">&copy; 2013 <a href="http://atelierbramdehaan.nl" class="underline">Atelier Bram de Haan</a>, Releases under <a href="http://atelierbram.mit-license.org" class="underline">MIT License</a></p>
          </div>
          <div class="large-4 columns">
            <a href="https://github.com/atelierbram/syntax-highlighting" class="sh-button">This repo on Github</a>


          </div>
        </div>
      </div>
    </footer>

    <script>
document.write('<script src=' +
('__proto__' in {} ? 'assets/js/vendor/zepto.min' : 'assets/js/vendor/jquery') +
    '.js><\/script>')
</script>

<script src="assets/js/foundation/foundation.min.js"></script>
<!-- <script src="assets/js/foundation/foundation.min.js"></script> -->
<!-- <script src="assets/js/foundation/foundation.alerts.js"></script> -->
<!-- <script src="assets/js/foundation/foundation.clearing.js"></script> -->
<!-- <script src="assets/js/foundation/foundation.cookie.js"></script> -->
<script src="assets/js/foundation/foundation.dropdown.min.js"></script>
<!-- <script src="assets/js/foundation/foundation.forms.js"></script> -->
<!-- <script src="assets/js/foundation/foundation.joyride.js"></script> -->
<!-- <script src="assets/js/foundation/foundation.magellan.js"></script> -->
<!-- <script src="assets/js/foundation/foundation.orbit.js"></script> -->
<!-- <script src="assets/js/foundation/foundation.placeholder.js"></script> -->
<!-- <script src="assets/js/foundation/foundation.reveal.js"></script> -->
<!-- <script src="assets/js/foundation/foundation.section.min.js"></script> -->
<!-- <script src="assets/js/foundation/foundation.tooltips.js"></script> -->
<!-- <script src="assets/js/foundation/foundation.topbar.js"></script> -->
<!-- <script src="assets/js/foundation/foundation.interchange.js"></script> -->
<script>
$(document).foundation();
</script>
<script>function insertTopborder() { $('<div class="rainbow-border"><span class="yellow-background"></span><span class="orange-background"></span><span class="red-background"></span><span class="magenta-background"></span><span class="violet-background"></span><span class="blue-background"></span><span class="cyan-background"></span><span class="green-background"></span></div>').insertBefore('#wrap'); } insertTopborder();</script>
    </body>
</html>

